<template>
  <div>
    <!-- 悬浮框 -->
    <ul class="levitate_box">
      <li>
        <ImgT src="/imgs/club/checkgame.png" @click="showPopup" alt="" />
      </li>
      <li>
        <ImgT src="/imgs/club/mini.png" @click="showOverlay" alt="" />
      </li>
    </ul>

    <!-- mimi -->
    <nut-overlay v-model:visible="isShowWin" :close-on-click-overlay="true">
      <MiniGameSelector
        :isVisible="isShowWin"
        :items="miniGameData"
        @game-click="handleGameClick"
        @close="closeModal"
      />
    </nut-overlay>

    <!-- popup -->
    <nut-popup v-model:visible="isPopup" position="right" style="width: 80%; height: 100%">
      <div class="game_title">
        <img src="/imgs/club/game.png" alt="">
        <span>{{ t('club_page_qtgame') }}</span>
      </div>
      <SwitchGames
        v-for="(game, index) in otherGameData"
        :key="index"
        :icon="game.game_icon"
        :title="game.game_type"
        :isLocked="game.game_lock_status"
        @click="handleSwitchGameClick(game)"
      />
    </nut-popup>
  </div>
</template>

<script lang="ts" setup>
import { ref, onUnmounted, onMounted  } from "vue";

import { useI18n } from "vue-i18n";
const { t } = useI18n();

import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";

import MiniGameSelector from './miniGameSelector.vue';
import SwitchGames  from './switchGames.vue';
// import { Local } from "@/utils/storage";

// import { storeToRefs } from 'pinia';
// import pinia from '@/store/index';
// import { Page } from '@/store/page';
// const {  clubId  } = storeToRefs(Page(pinia));
// const emit = defineEmits(['checkGame', 'miniClick']);
const clubId = ref(0)
// console.log('clubId.value--------',clubId.value)
const isShowWin = ref(false);
const isPopup = ref(false);

const showOverlay = () => {
  isShowWin.value = true;
};

const showPopup = () => {
  isPopup.value = true;
};

const miniGameData: any = ref([])
const otherGameData:any = ref([])


const handleGameClick = (item: any) => {
  console.log('item', item)
  // emit('checkGame', item);
  isShowWin.value = false
};

const closeModal = () => {
  isShowWin.value = false;
};

const handleSwitchGameClick = (game: { id: number; title: string }) => {
  console.log('game', game)
  // emit('miniClick', game);
};


// 获取MINI游戏列表
const getMiniGameList = () => {
  const req = NetPacket.req_get_club_minigame();
  req.club_id = clubId.value
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_get_club_minigame",
    callback: getMiniGameListHandle,
  });
};
// MINI游戏列表返回
const getMiniGameListHandle = (res: any) => {
  console.log('MINI游戏列表', res)
  miniGameData.value = res.gamelist
};


// 获取其它游戏列表
const getClubOtherGameList = () => {
  const req = NetPacket.req_get_club_othergame();
  req.club_id = 25
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_get_club_othergame",
    callback: getClubOtherGameListHandle,
  });
};
// 其它游戏列表返回
const getClubOtherGameListHandle = (res: any) => {
  console.log('其它游戏列表', res)
  otherGameData.value = res.gamelist
};



onUnmounted(() => {
  // 取消监听
});

onMounted( () => {
  setTimeout(() => {
    getMiniGameList()
    getClubOtherGameList()
  },500)
});
</script>

<style scoped lang="scss">
.levitate_box {
  width: 72px;
  min-height: 72px;
  position: fixed;
  right: 15px;
  bottom: 86px;
  z-index: 99;
  li {
    margin: 6px 0;

    img {
      width: 72px;
       height: 72px;
    }
  }   
}

:deep(.nut-popup) {
  background: #100E26;

  .game_title {
    margin: 40px 0 12px 14px;
    img {
      width: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: top;
    }
    span {
      color: #FFF;
      text-align: center;
      font-family: "PingFang SC";
      font-size: 16px;
      font-weight: 600;
    }
  }
}
</style>